<script setup>
  import {
    Card,
    Image,
    List,
    Row,
    Col,
    Button,
    Tabs,
    TabPane,
    // Avatar,
    CheckboxGroup,
    Checkbox,
  } from '@arco-design/web-vue';

  import { IconSend, IconCalendarClock, IconLocation } from '@arco-design/web-vue/es/icon';
  import topBg from '/@/assets/events/top.png';

  const navTabs = [
    {
      id: 1,
      name: '热门活动',
    },
    {
      id: 2,
      name: '最新发布',
    },
  ];
  // const avatarUrl =
  //   'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp';

  const dataSource = [
    {
      title: 'Platform',
      data: ['iOS', 'Android', 'Web'],
    },
    {
      title: 'Framework',
      data: ['Angular', 'Vue', 'React'],
    },
    {
      title: 'Language',
      data: ['C++', 'JavaScript', 'Python'],
    },
    {
      title: 'Component',
      data: ['Button', 'Breadcrumb', 'Transfer'],
    },
    {
      title: 'Design',
      data: ['Figma', 'Sketch', 'Adobe XD'],
    },
    {
      title: 'Plugin',
      data: ['Edu Tools', 'BashSupport', 'GitToolBox'],
    },
    {
      title: 'Platform',
      data: ['iOS', 'Android', 'Web'],
    },
    {
      title: 'Framework',
      data: ['Angular', 'Vue', 'React'],
    },
    {
      title: 'Language',
      data: ['C++', 'JavaScript', 'Python'],
    },
  ];
</script>
<template>
  <div class="w-full">
    <div class="w-full h-[450px] overflow-hidden">
      <img :src="topBg" class="w-full h-full object-cover" />
    </div>
    <div class="py-[12px] box-border">
      <div class="w-[calc(100%-80px)] flex relative mx-auto">
        <div class="rightt w-[320px]">
          <!-- 左侧类型 -->
          <card class="hot-topic-block mb-[10px]" hoverable :bordered="false">
            <Row class="text-[20px] text-black">类型：</Row>
            <Row>
              <checkbox-group :default-value="['1', '2']" direction="vertical">
                <Checkbox value="1">AMA</Checkbox>
                <Checkbox value="2">路演</Checkbox>
              </checkbox-group>
            </Row>
            <Row class="text-[20px] text-black">方式：</Row>
            <Row>
              <checkbox-group :default-value="['1', '2']" direction="vertical">
                <Checkbox value="1">线上</Checkbox>
                <Checkbox value="2">线下</Checkbox>
              </checkbox-group>
            </Row>
            <Row class="text-[20px] text-black">录播：</Row>
            <Row>
              <checkbox-group :default-value="['1']" direction="vertical">
                <Checkbox value="1">录播</Checkbox>
              </checkbox-group>
            </Row>
          </card>
          <!-- 左侧类型 -->
          <!-- 广告区 -->
          <card class="ad-block mb-[10px]" hoverable :bordered="false">
            <template #cover>
              <div
                :style="{
                  height: '192px',
                  overflow: 'hidden',
                }"
              >
                <Image
                  width="100%"
                  height="100%"
                  fit="cover"
                  src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp"
                />
              </div>
            </template>
          </card>
          <!-- 广告区 -->
        </div>
        <div class="center flex-1 min-h-[calc(100vh-13rem-1240px)] w-[calc(100%-430px)] ml-[18px]">
          <Card :bordered="false" :hoverable="true" class="mb-[10px] relative">
            <Tabs size="large" class="w-full overflow-hidden nav-tabs">
              <TabPane v-for="item of navTabs" :key="item?.id" :title="item?.name" />
            </Tabs>
            <div class="flex items-center absolute right-[16px] top-[26px]">
              <IconSend class="mr-2 w-[20px]" />
              活动合作
            </div>
          </Card>

          <List
            :grid-props="{ gutter: [20, 20], sm: 24, md: 12, lg: 8, xl: 6 }"
            :data="dataSource"
            :bordered="false"
          >
            <template #item="{ item, index }">
              <Card :key="item" :bordered="false" :hoverable="true" class="mb-[10px]">
                <Row class="h-[180px]">
                  <Image
                    width="100%"
                    height="100%"
                    fit="cover"
                    src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp"
                  />
                </Row>
                <Row
                  class="text-[18px] font-bold text-black my-4 max-h-[58px] overflow-ellipsis overflow-hidden"
                >
                  阿里云生命科学与高性能计算峰会
                </Row>
                <Row class="my-4 flex items-center">
                  <IconCalendarClock class="w-[20px] mr-2" />
                  2022-09-13
                </Row>
                <Row class="my-4 flex items-center text-[16px]">
                  <Col :span="12" class="flex items-center">
                    <IconLocation class="w-[20px] mr-1 text-[18px]" />
                    上海
                  </Col>
                  <Col :span="12" class="text-right">
                    <Button v-if="index / 2 === 0" type="primary" shape="round">报名参加</Button>
                    <Button v-else shape="round">活动详情</Button>
                  </Col>
                </Row>
              </Card>
            </template>
          </List>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .nav-tabs >>> .arco-tabs-content {
    padding: 0;
  }

  .user-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ad-block >>> .arco-card-body {
    padding: 0 !important;
  }

  .hot-topic-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hot-topic-title-more {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .hot-topic-block >>> .arco-list-item-main {
    width: 100%;
  }

  .select-block >>> .arco-list-item-meta,
  .select-block >>> .arco-list-item-meta-content,
  .select-block >>> .arco-list-item-meta-title {
    height: 100%;
  }

  .select-block >>> .arco-list-item-meta-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .select-block >>> .arco-list-item-content {
    height: calc(100% - 30px);
  }

  .select-block >>> .arco-list-item-action {
    height: 30px;
    line-height: 30px;
  }

  .select-block >>> .arco-list-item-main {
    height: 80px !important;
    padding-right: 6px;
    box-sizing: border-box;
  }
</style>
